<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 顶部横幅 -->
    <div
      class="relative h-[70vh] bg-gradient-to-r from-blue-400 to-blue-600 overflow-hidden"
    >
      <div class="absolute inset-0 bg-pattern opacity-10"></div>
      <div
        class="h-full flex flex-col justify-center items-center text-white relative z-10 px-4"
      >
        <van-image class="mb-8 w-24 h-24" src="/img/logo.jpg" fit="contain" />
        <h1 class="text-4xl font-bold mb-4 text-center animate-fade-in">
          缘来是你
        </h1>
        <p
          class="text-lg text-blue-100 max-w-md text-center mb-8 animate-fade-in-up"
        >
          让我们帮您找到生命中的另一半
        </p>
        <van-button
          type="primary"
          size="large"
          round
          color="white"
          class="!text-blue-500 !font-bold !px-8"
          @click="goToSignup"
        >
          立即报名
        </van-button>
      </div>
    </div>

    <!-- 功能特点 -->
    <div class="px-4 py-8">
      <van-grid :column-num="2" :gutter="16" :border="false">
        <van-grid-item>
          <van-image src="/img/privacy.png" class="w-12 h-12 mb-2" />
          <h3 class="text-gray-800 font-medium mb-1">隐私保护</h3>
          <p class="text-gray-500 text-sm">严格的信息保密机制</p>
        </van-grid-item>

        <van-grid-item>
          <van-image src="/img/service.png" class="w-12 h-12 mb-2" />
          <h3 class="text-gray-800 font-medium mb-1">贴心服务</h3>
          <p class="text-gray-500 text-sm">专业的服务团队</p>
        </van-grid-item>
      </van-grid>
    </div>

    <!-- 底部信息 -->
    <div class="bg-white py-8 px-4 text-center">
      <p class="text-gray-500 text-sm">© 2024 缘来是你. All rights reserved.</p>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";

const router = useRouter();

const goToSignup = () => {
  router.push("/signed");
};
</script>

<style scoped>
.bg-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.animate-fade-in {
  animation: fade-in 1s ease-out;
}

.animate-fade-in-up {
  animation: fade-in-up 1s ease-out 0.3s both;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
